import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_frame/common/common_config.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:qr_flutter/qr_flutter.dart';

import '../../assets/color_config.dart';
import '../../utils/theme_util.dart';
import '../../weiget/image_widget.dart';

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => HomePageState();
}

class HomePageState extends State {
  var count = 1.obs;
  var qrCodeData = 123456.obs;
  List<String> cmsDataSource = ["bannel1", "bannel2"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorConfig.colorWhite,
      appBar: AppBar(
        // toolbarHeight: 0,
        elevation: 0,
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.transparent,
        systemOverlayStyle: ThemeUtil.dark,
      ),
      extendBodyBehindAppBar: true,
      body: Container(
        child: Center(
          child: Column(
            children: [
              //顶部图片
              Container(
                width: double.infinity,
                height: 220.h,
                alignment: Alignment.center,
                color: ColorConfig.colorWhite,
                child: Text(
                  "CloudPick",
                  style: TextStyle(
                      fontSize: 46.sp,
                      color: ColorConfig.colorPrimary,
                      fontWeight: FontWeight.bold),
                ),
              ),
              SizedBox(height: 20.h),
              //二维码
              GestureDetector(
                onTap: () {
                  qrCodeData += 1;
                },
                child: Obx(() => QrImageView(
                      size: 200.w,
                      data: qrCodeData.value.toString(),
                      dataModuleStyle: const QrDataModuleStyle(
                        color: Colors.black,
                        dataModuleShape: QrDataModuleShape.square,
                      ),
                    )),
              ),
              const Expanded(flex: 1, child: SizedBox()),
              //滚动视图
              Offstage(
                offstage: cmsDataSource.isEmpty,
                child: AspectRatio(
                  aspectRatio: 4 / 2,
                  child: Container(
                    // margin: EdgeInsets.only(top: 30.w, bottom: 25.w),
                    width: double.infinity,
                    height: double.infinity,
                    child: Swiper(
                      itemCount: cmsDataSource.length,
                      itemBuilder: (BuildContext context, int index) {
                        var model = cmsDataSource[index];
                        return ClipRRect(
                          //剪裁为圆角矩形
                          borderRadius: BorderRadius.circular(10.w),
                          child: ImageWidget(
                            url: model,
                            name: "${assetImage}home/$model.png",
                            width: double.infinity,
                            height: double.infinity,
                            fit: BoxFit.fitWidth,
                          ),
                        );
                      },
                      autoplay: cmsDataSource.length > 1,
                      autoplayDelay: 5000,
                      onTap: (int index) {},
                      pagination: SwiperPagination(),
                      control: SwiperControl(),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
